<template>
  <div id="cateGoods">
    <van-tabs v-model="tabsActive" type="line" swipeable animated sticky :line-height="2" offset-top="50">
      <van-tab :title="item.name" v-for="(item,index) in cateGoods.children" :key="index" :name="`id_${item.id}`">
        <div class="content">
          <div class="name">{{item.front_name}}</div>
          <div class="desc">{{item.front_desc}}</div>
        </div>
        <div class="flex">
          <div class="flex-item" v-for="(item1,index1) in item.goods" :key="index1" @click="onClickGood(item1.id)">
            <van-image width="80%" height="100" :src="item1.list_pic_url">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <div class="name">{{item1.name}}</div>
            <div class="retail_price">{{item1.retail_price}}</div>
            <div class="market_price">{{item1.market_price}}</div>
            <div></div>
          </div>
        </div>
        <van-empty v-if="cateGoods.children.length==0"
          class="empty-data"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="暂时没有商品"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #cateGoods{
    width: 100%;
    height: 100%;
    .content{
      width: 100%;
      text-align: center;
      background-color: rgba(187, 180, 180, 0.281);
      margin-top: 5px;
      .name{
        font-size: 1rem;
        color: black;
        padding: 10px 0px 5px 0px;
      }
      .desc{
        font-size: 0.8rem;
        color: grey;
        padding: 0px 0px 10px 0px;
      }
    }
  }
  .flex{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    .flex-item{
      flex: 0 0 32%;
      margin: 2px;
      text-align: center;
      .name{
        width: 90px;
        margin: auto;
        //height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 25px;
      }
      .retail_price{
        color: red;
        margin-top: 8px;
      }
      .market_price{
        color: gray;
        text-decoration:line-through;
        margin-top: 4px;
        font-size: 0.9rem;
      }
    }
  }
  .empty-data .van-empty__image{
    width: 90px!important;
    height: 90px!important;
  }
</style>

<script lang="ts">
// @ is an alias to /src
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import {
  Tab, Tabs,Image as VanImage,Divider,Col,
  Row
} from 'vant';
import router from '../router';
import store from '../store/index';

Vue.use(Tabs).use(Tab).use(VanImage).use(Divider).use(Col)
.use(Row);
@Component
export default class CateGoodsComponent extends Vue {
  private cate_id: string = '0';
  private tabsActive: string = '';
  private cateGoods: any = {};

  async created(){
    this.cate_id=router.currentRoute.params.id;
    store.commit('global/setShowPageLoading',true);
    await store.dispatch('category/getCateGoods',this.cate_id);
    this.cateGoods=store.getters['category/cateGoods'].data[0];
    this.tabsActive=`id_${router.currentRoute.params.index!='0'?router.currentRoute.params.index:this.cateGoods.children[0].id}`;
    router.currentRoute.meta.navTitle=`${this.cateGoods.name}分类`;
    store.commit('global/setShowPageLoading',false);
  }

  private onClickGood(id: string){
    router.push({
      path:`/goodDetail/${id}`
    });
  }
}
</script>
